<template>
  <div>
    <pageadd></pageadd>
    <pagedel></pagedel>
    <h4>父组件</h4>
    <p>
       count:{{count}}
    </p>
    <p>
       dataCount:{{dataCount}}
    </p>
   <p>
       newcount:{{newcount}}
    </p>
    <P>
      <!-- {{$store.getters.newcountY('**')}} -->
      <el-button type="primary" @click="changeData">异步修改</el-button>
    </P>
    <h4>访问vuex模块中的属性</h4>
    <p>姓名:{{$store.state.user.id}}</p>
    <p>姓名:{{name}}</p>
    <el-button type="primary" @click="changeName">改变姓名</el-button>
  </div>
</template>

<script>
/**
 * 1.state
  state是什么?

  定义:state(vuex) ≈ data (vue)

  vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.

  虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到,当然你也可以通过watch $store去解决这个问题,那你可以针是一个杠精

 */
import { mapGetters, mapState ,mapActions} from "vuex"
import pageadd from "components/test/pageadd"
import pagedel from "components/test/pagedel"
export default {
  components: {
    pageadd,
    pagedel
  },
  data() {
    return {
      dataCount: this.$store.state.count //用data接收，不能被及时响应
    }
  },
  computed: {
    /*不使用mapState 辅助函数*/
    // count(){
    //   return this.$store.state.count //用computed接收
    // },
    /*使用mapState 辅助函数*/
    //...mapState(['count']),//用数组
    ...mapState({//用对象
      count: "count", // 第一种写法
      sex: state => state.sex, // 第二种写法
      name:state => state.user.id,
      from: function(state) {
        // 用普通函数this指向vue实例,要注意
        return this.str + ":" + state.from
      },
      // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
      // from: (state) => this.str + ':' + state.from
      myCmpted: function() {
        // 这里不需要state,测试一下computed的原有用法
        return "测试" + this.str
      }
    }),
    ...mapGetters(['newcount'])
  },
  methods:{
    ...mapActions([
      'changeAccount', // 将 `this.changeAccount()` 映射为 `this.$store.dispatch('changeAccount')`
    ]),
    changeData(){
     // this.$store.dispatch('changeAccount',{number:999})
     this.changeAccount({number:999}).then(()=>{

     })
    },
    changeName(){
      //user和modules中注册的user挂钩
      this.$store.dispatch('user/changeId',{id:100})
    }
  }
}
</script>

<style></style>
